import { Link } from 'react-router-dom';

const moduleDisplayName = '${moduleDisplayName?js_string}';
const moduleSummary = '${moduleSummary?js_string}';
const apiBasePath = '/${apiBasePath}';
const managementPath = '${frontendRouteFullPath?js_string}';

const fields = [
<#list classInfo.fieldList as field>
  {
    name: '${field.fieldName}',
    comment: '${field.fieldComment?default('')?replace('\'', "\\'")?replace("\n", " ")}'
  }<#if field_has_next>,</#if>
</#list>
];

const metricCards = [
  {
    title: moduleDisplayName + ' 总数',
    value: '—',
    hint: '接入统计接口后，展示实时数据量。',
  },
  {
    title: '本周新增',
    value: '—',
    hint: '结合创建时间字段统计近 7 天新增记录数。',
  },
  {
    title: '待处理任务',
    value: '—',
    hint: '根据状态字段统计待审核/待分配的记录。',
  },
];

const quickActions = [
  {
    title: '创建' + moduleDisplayName,
    description: '跳转到 ' + moduleDisplayName + ' 管理页面发起新增表单。',
    to: managementPath,
  },
  {
    title: '批量导入',
    description: '预留上传入口，结合后台批量导入 API 使用。',
    to: managementPath,
  },
  {
    title: '查看接口文档',
    description: '在 swagger / postman 中验证接口定义与权限规则。',
    to: '/system/features',
  },
];

const buildSummary = () => {
  if (moduleSummary && moduleSummary.trim().length > 0) {
    return moduleSummary;
  }
  return moduleDisplayName + ' 业务模块，支持统一的增删改查、分页查询与权限控制。';
};

const HomePage = () => {
  return (
    <div className="page-stack">
      <section className="card">
        <div className="page-header">
          <div>
            <h2>{moduleDisplayName} 工作台</h2>
            <p>{buildSummary()}</p>
            <div className="summary-grid" style={{ marginTop: 16 }}>
              <div className="stat-card">
                <span className="label">实体类型</span>
                <span className="value">{moduleDisplayName}</span>
                <p className="hint">对应 `src/types/{classInfo.className}.ts` 定义</p>
              </div>
              <div className="stat-card">
                <span className="label">后端接口前缀</span>
                <span className="value">{apiBasePath}</span>
                <p className="hint">已对接分页、查询、详情、增删改接口</p>
              </div>
              <div className="stat-card">
                <span className="label">管理入口</span>
                <span className="value">{moduleDisplayName} 管理</span>
                <p className="hint">React/Vue 页面自动生成可直接操作</p>
              </div>
            </div>
          </div>
          <div className="page-actions">
            <Link to={managementPath} className="pill-button">
              新建 {moduleDisplayName}
            </Link>
            <Link to="/system/features" className="pill-button ghost">
              查看系统特性
            </Link>
          </div>
        </div>
      </section>

      <section className="card">
        <h3 style={{ marginTop: 0 }}>实时指标（可对接后端统计接口）</h3>
        <div className="summary-grid">
          {metricCards.map((metric) => (
            <div className="stat-card" key={metric.title}>
              <span className="value">{metric.value}</span>
              <span className="label">{metric.title}</span>
              <p className="hint">{metric.hint}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="panel">
        <h3 style={{ marginTop: 0 }}>常用操作</h3>
        <ul className="quick-links">
          {quickActions.map((action) => (
            <li key={action.title}>
              <div>
                <strong>{action.title}</strong>
                <p style={{ margin: '4px 0 0', color: '#64748b', fontSize: 12 }}>{action.description}</p>
              </div>
              <Link to={action.to} className="pill-button ghost">
                前往
              </Link>
            </li>
          ))}
        </ul>
      </section>

      <section className="panel">
        <h3 style={{ marginTop: 0 }}>数据结构 / 字段字典</h3>
        <ul className="data-dictionary" style={{ paddingLeft: 0 }}>
          {fields.map((field) => (
            <li key={field.name}>
              <code>{field.name}</code>
              {field.comment ? <span> — {field.comment}</span> : null}
            </li>
          ))}
          <li>
            类型声明位于 <code>src/types/${classInfo.className}.ts</code>，可根据业务字段拓展。
          </li>
          <li>
            请求封装位于 <code>src/lib/api.ts</code>，适合集中处理鉴权与错误提示。
          </li>
        </ul>
      </section>
    </div>
  );
};

export default HomePage;

